<template>

        <div class="show-photo">
                    <div class="handleButton" @click="rowLeft" :class="btnOne=='left'?'disableBtn':''">
                        <i class="el-icon-arrow-left"/>
                    </div>
                    <div class="photo-center">
                        <div class="photo-box" :style="{left:leftOne+'px'}">
                            <div  v-for="(img,index) in picList" :key="index" class="box-picture" :class="isActive(index)?'active':''"  >
                                <el-image  :src="dealImage(img.fileBinary)" class="errorThree"  
                            @contextmenu.prevent.native="openMenu(index,img.fileBinary,$event)" >
                                </el-image>
                                <span class="layer">第{{img.layer}}层</span>
                            </div>
                        </div>
                    </div>
                    <div class="handleButton" @click="rowRight" :class="btnOne=='right'?'disableBtn':''">
                        <i class="el-icon-arrow-right"/>
                    </div>
         <ul
            v-show="visible"
            :style="{left:left+'px',top:top+'px'}"
            class="contextmenu"
        >
            <li @click="uploadPhoto(tagUrl,photoType)">设为导出图</li>
            <!-- <li @click="openNewWindow(tagUrl)">在新的标签打开图片</li> -->
        </ul>          
        </div>
</template>

<script>
export default {
    name: 'photoshow',
    props: {
        //图片列表
        picList: {
            type: Array
        },
        photo:{
            default:undefined,
            type:String
        },
        //右击图片类型
        photoType:"",
    },
    data() {
        return {
        //图片左移距离
        leftOne:0,
        //是否为不可点击样式
        btnOne:"left",
        //右击出现位置
        left:'',top:'',
        //右击目标url
        tagUrl:'',
        //是否显示
        visible:false,
        clickIndex:undefined,
        //选中z视图
        Z_index:0,
        };
    },
    watch:{
        visible(value) {
            if (value) {
                document.body.addEventListener('mousewheel', this.closeMenu)
                document.body.addEventListener('click', this.closeMenu)
            } else {
                document.body.removeEventListener('click', this.closeMenu)
            }
        },
        photo(val){
            if(!val){
                if (this.picList.length!=0) {
                    this.$emit('selectPicture', this.picList[0].fileBinary,this.photoType);
                }   
                
            }
            this.picList.map((item,index)=>{
                if (item.fileBinary ==val) {
                    this.Z_index = index
                }  
            })
        }
    },
    methods: {
        //左移动按钮点击
        rowLeft(){
           if(this.leftOne!=0){
                this.btnOne=""
                this.leftOne=this.leftOne+240;
            } 
            else{
                this.btnOne="left";
            }    
        },
        //右移动按钮点击
        rowRight(){
             let nub= this.picList.length-2
            if(this.leftOne>-240*nub){
                this.btnOne=""
                this.leftOne=this.leftOne-240;
            }
            else{
                this.btnOne="right"
            }
         }, 
        // 右击按钮
        openMenu(index,tag, e) {
            const menuMinWidth = 100
            const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
            const offsetWidth = this.$el.offsetWidth // container width
            const maxLeft = offsetWidth - menuMinWidth // left boundary
            const left = e.clientX  // 15: margin right
            // if (left > maxLeft) {
            //     this.left = maxLeft
            // } else {
            this.left = left
            // }
            this.clickIndex = index
            this.top = e.clientY-40
            this.tagUrl = tag
            this.visible = true
        },
        //取消右击显示
        closeMenu() {
            this.visible = false
        },
        //上传后样式
        isActive(index){
            return index==this.Z_index  
        },
        //选择图片
        uploadPhoto(url,type){
               this.Z_index=this.clickIndex;
               this.$emit('selectPicture', url,type);    
        },
        //缩略图获取
        dealImage(val){
            let imagepath= val.split("/")
            imagepath.splice(imagepath.length-1,0,"compress")
            // console.log(imagepath.join("/"))
            return this.baseUrl+imagepath.join("/")
        }
    },
};
</script>

<style lang="scss" scoped>

.show-photo{
    height: 90%;
    margin-top: 20px;
    padding-left: 0px; 
    height: 75%;
    /* width: 90%; */
    display: flex;
}

.show-img{
    width: 100%;
    display: flex;
    height: 150px;
    /* background: chartreuse; */
}

.handleButton{
    width: 3%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #43454D;
    cursor: pointer;
}
.handleButton:hover{
    background: #9FA2AE;
}
.handleButton i{
    /* height: 20px; */
    font-size: 32px;
    color: white;

}
.disableBtn{
    background: #9FA2AE;
    cursor: not-allowed;
}
.photo-center{
    width: 94%;
    height: 100%;
    display: flex;
    // align-items: center;
    position: relative;
    overflow:hidden;
}
/* 图片 */
.errorThree{
    height:calc(100% - 2px);
    width:220px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    // margin-left: 20px;
    /* display: inline-block; */
    
}
.photo-box{
    position: absolute;
    height: 100%;
    display: inline-block;
    white-space: nowrap;
    padding-right: 20px;
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
}

.errorThreeTow{
    height: 100%;
    /* width:630px; */
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    width:220px;
    margin-left: 20px;
}


.contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: fixed;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #000;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
}
.contextmenu li:hover {
    background: #3066FF;
    color: #fff;
}

.box-picture{
    display: inline-block;
    height: calc(100% - 5px);
    width:220px;
    margin-left: 20px;
    position: relative;
    .layer{
        position: absolute;
        color: white;
        left: 0px;
        top: 0px;
        padding:2px 5px;
        font-size: 14px;
        background: rgba(0, 0, 0, 0.7);
    }
    .layer1{
        position: absolute;
        color: white;
        left: 20px;
        bottom: 0px;
        padding:2px 5px;
        font-size: 14px;
        width: calc(100% - 10px);
        background: rgba(0, 0, 0, 0.7);
    }
    .layer2{
        position: absolute;
        color: white;
        left: 20px;
        bottom: 10px;
        padding:2px 5px;
        background: rgba(0, 0, 0, 0.7);
    }
}
.active{
    border: 2px solid #3066FF;
}
</style>